<template>
  <div class="ai-home">
    <el-container class="ai-content-wrapper">
      <!-- 顶部区域 -->
      <el-main class="ai-home-top">
        <el-row class="ai-home-top__content" justify="center" align="middle">
          <el-col :span="16">
            <h1 class="ai-home-top__content-title">轻松创作 一键分发</h1>
            <p class="ai-home-top__content-desc">
              无论您是自媒体作者、编剧或营销人员，只要您在工作学习中需要文案工作，那么星际创意宝一定会成为您的得力助手。我们基于大规模概率语言模型，经过海量文本知识的学习，使得AI在中文表达上变得得心应手。使用创意宝编剧，您可以轻松生成高质量的剧本和文稿，节约时间和精力，提升工作效率。
            </p>
            
            <el-row class="feature-list" :gutter="20">
              <el-col :span="4" v-for="(item, index) in featureList" :key="index">
                <el-card class="feature-card" shadow="hover">
                  <div class="feature-icon">
                    <el-image :src="item.icon" fit="contain" />
                  </div>
                  <div class="feature-title">
                    <el-icon><component :is="item.iconName" /></el-icon>
                  </div>
                  <div class="feature-desc">{{ item.desc }}</div>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-main>

      <!-- 热门工具区域 -->
      <el-main class="tools-section">
        <h2 class="section-title">热门工具</h2>
        <el-row :gutter="24">
          <el-col :span="6" v-for="(item, index) in apiItemDomainList" :key="index">
            <el-card 
              class="tool-card" 
              shadow="hover"
              @click="navigateToTool(item)"
            >
              <div class="tool-icon">
                <el-icon><component :is="item.iconName" /></el-icon>
              </div>
              <h3 class="tool-title">{{ item.iconName }}</h3>
              <p class="tool-desc">{{ item.iconSubName }}</p>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";

export default {
  name: "HomeComponentsChat",
  data() {
    return {
      isLogin: !!getToken(),
      apiItemDomainList: [],
      featureList: [
        {
          icon: 'https://static.yilantv.com/Transformers/vam/images/text/home/write.svg',
          iconName: 'Edit',
          desc: '快速生成 专注创意 提高效率'
        },
        {
          icon: 'https://static.yilantv.com/Transformers/vam/images/text/home/style.svg',
          iconName: 'Collection',
          desc: '满足各种场景需求，文章风格多样'
        },
        {
          icon: 'https://static.yilantv.com/Transformers/vam/images/text/home/optimize.svg',
          iconName: 'Magic',
          desc: '结构优化 表达润色 流畅自然'
        },
        {
          icon: 'https://static.yilantv.com/Transformers/vam/images/text/home/inspiration.svg',
          iconName: 'Light',
          desc: '激活创作灵感，助力涌现全新思路'
        },
        {
          icon: 'https://static.yilantv.com/Transformers/vam/images/text/home/language.svg',
          iconName: 'Globe',
          desc: '支持多语言创作，拓展全球受众'
        }
      ]
    };
  },
  created() {
    this.getDomainByHot();
  },
  methods: {
    getDomainByHot() {
      this.$api.get("/module/session/domain/getDomainByHot").then((res) => {
        this.apiItemDomainList = res.data;
      });
    },
    navigateToTool(item) {
      this.$router.push({
        path: 'mediaInfo',
        query: {
          routePath: item.routePath,
          iconName: item.iconName,
          uniqueKey: item.uniqueKey,
          firstContent: item.firstContent,
          infomation: item.infomation
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.ai-home {
  min-width: 1033px;
  
  .ai-content-wrapper {
    height: calc(100vh - 56px);
    background: #fafafa;
    padding: 16px;
  }
}

.ai-home-top {
  background: linear-gradient(135deg, #f5f7ff 0%, #e4ebff 100%);
  border-radius: 16px;
  padding: 40px 0;

  &__content {
    &-title {
      font-size: 48px;
      background: linear-gradient(90deg, #333 0%, #666 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 24px;
    }

    &-desc {
      color: #666;
      font-size: 16px;
      line-height: 1.8;
      margin-bottom: 40px;
    }
  }
}

.feature-list {
  .feature-card {
    height: 200px;
    text-align: center;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-5px);
    }

    .feature-icon {
      width: 48px;
      height: 48px;
      margin: 0 auto 16px;
      
      img {
        width: 100%;
        height: 100%;
      }
    }

    .feature-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 12px;
    }

    .feature-desc {
      font-size: 14px;
      color: #666;
      line-height: 1.5;
    }
  }
}

.tools-section {
  padding: 40px 0;

  .section-title {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 24px;
  }

  .tool-card {
    height: 180px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-5px);
    }

    .tool-icon {
      font-size: 32px;
      color: var(--el-color-primary);
      margin-bottom: 16px;
    }

    .tool-title {
      font-size: 18px;
      margin-bottom: 12px;
    }

    .tool-desc {
      font-size: 14px;
      color: #666;
      line-height: 1.5;
    }
  }
}
</style>
